<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 400px;height: 100px;border: solid 1px black;margin: 0 auto;position: relative;}
        .box p{margin: 0;position: absolute;height: 20px;top:40px;left:0;background: #55f;width: 0px;}
    </style>
</head>
<body>
    <div class="box">
        <p></p>
    </div>
</body>
<script>
    // 选择器
    var op = document.querySelector(".box p");

    // 用来保存计时器的返回值，
    var t;
    // 步长
    var speed = 2;
    // 目标
    var target = 400;

    // 事件执行函数
    document.onclick = function(){
        // 开启之前先清除上一个计时器
        clearInterval(t);
        // 开启
        t = setInterval(function(){
            // 获取当前值
            var now = parseInt(getStyle(op, "width"));
            // 判断剩下的距离是否满足一步
            if(target - now < speed){
                // 不满足，就清除计时器，然后强行设置到终点
                clearInterval(t);
                // 设置样式
                op.style.width = target + "px";
            }else{
                // 满足，不清除，在当前距离的基础之上增加一步，再设置回去
                op.style.width = now + speed + "px";
            }
        }, 30);
    }
    // console.log(parseInt(getStyle(op,"width")))
    // 获取样式
    function getStyle(ele, attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele)[attr];
        }
    }

</script>
</html>